Les Listes à puces (CSS)
Retour sur les Listes à puces en XHTML
Retour sur l'exemple XHTML précédent
Les propriétés CSS vont permettre d'embellir nos listes à puces.
dt
{
font-weight : bold;
color : white;
background-color : black;
}
Sans vouloir prétendre que cela soit plus esthétique, on distingue déjà plus facilement les mots de leur définition grace au CSS.
Il faut savoir qu'il existe par ailleurs des propriétés CSS spécifiques aux listes à puces, que nous allons maintenant voir.
Retrait des listes
Cette propriété pemet de modifier le décalage du texte par rapport aux puces et bien souvent d'accroître la lisibilité de la liste. C'est un petit détail de présentation
qui peut être bien utile dans certains cas.
La propriété en question est list-style-position. Elle peut prendre la valeur outside qui met le texte en retrait (valeur par défaut) ou la valeur inside (la puce est intégrée au bloc de texte).
Si on veut que le texte de nos listes à puces ne soit plus mis en retrait, il suffit donc d'écrire le code suivant :
ul
{
list-style-position : inside;
}
La mise en retrait relève donc principalement de l'esthétique, mais c'est une possibilité qui peut s'avérer intéressante si le contenu des puces est particulièrement long.
Présentation de la puce
On peut changer l'apparence de la puce à l'aide de la propriété list-style-type. En effet, rien n'impose d'avoir un rond noir comme puce, ou bien une numérotation de type 1,2,3,4.
La propriété list-style-type peut prendre un grand nombre de valeurs. Certaines sont adaptées aux listes non ordonnées, d'autres aux listes ordonnées.
Voici les valeurs adaptées aux listes non ordonnées <ul> :
- disc : un disque noir (par défaut);
- circle : un cercle;
- square : un carré;
- none : pas de puce.
Pour utiliser des carrés dans des listes à puces non ordonnées, on écrira donc le code suivant:
ul
{
list-style-type : square; /* Puces carrées */
}
Remarque : Il faut appliquer la propriété list-style-type à la balise <ul>. Il en va de même avec les listes à puces ordonnées.
Exemple des différents types de listes non ordonnées :
A présent, les valeurs adaptées aux listes ordonnées <ol> :
- decimal : nombres décimaux habituels (1,2,3,4..). Par défaut;
- decimal-leading-zero : pareil, mais les nombres commencent par un zéro (01,02,03,04...);
- upper-roman : numérotation romaine en majuscules (I,II,III,IV...);
- lower-roman : numérotation romaine en minuscules (i,ii,iii,iv...);
- upper-alpha : numérotation alphabétique en majuscules (A,B,C,D...);
- lower-alpha : numérotation alphabétique en minuscules (a,b,c,d...);
- lower-greek : numérotation grecque.
Exemple de code avec les listes à puces ordonnées :
ol
{
list-style-type : upper-alpha; /* Numérotation alphabétique*/
}
Exemple des différents types de listes ordonnées :
Changer la puce pour une image
Pour une liste non ordonnée, nous avons le choix entre trois ou quatre types de puces différentes. C'est bien mais on peut faire mieux :
utiliser sa propre image en tant que puce !
La spécification d'une image en tant que puce s'effectue via la propriété list-style-image. Elle s'utilise comme background-image : il faut indiquer ou se trouve l'image à l'aide de l'url ().
Par exemple, si on a une image puce.gif située dans le même dossier que le fichier CSS, on peut écrire le code suivant :
ul
{
list-style-image : url("puce.gif");
}
Cela donne ainsi grâce au CSS une petite présentation sympatique.